<template>
	<div class="offcanvas-lg   offcanvas-end bg-body-tertiary col-lg-3 col-xl-2 mt-lg-2 pt-lg-5  position-fixed h-100 "
		tabindex="-1" id="sidebarMenu">
		<div class="offcanvas-header text-red fw-bold">
			<h5 class="offcanvas-title">一点通</h5>
			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu"></button>
		</div>
		<div class="offcanvas-body d-flex flex-column p-3 h-100">
			<ul class="nav nav-pills flex-column mb-auto">
				<li v-for="(item,i) in menuList" :key="i">
					<a @click="changedMenu(i)" class="nav-link" :class="i === curIndex ? 'active' :''">
						<svg class="bi pe-none me-2" width="16" height="16">
							<use :href="item.svg"></use>
						</svg> {{item.title}}
					</a>
				</li>
			</ul>
			<hr>

			<div class="d-flex align-items-center ms-3">
				<span>admin</span>
				<a href="#" class="text-red">
					<svg class="bi logout ms-2">
						<use xlink:href="#logout"></use>
					</svg>
				</a>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				menuList: [{
						title: "首页",
						svg: "#home",
						path: "/admin/home",
					},
					{
						title: "订单管理",
						svg: "#table",
						path: "/admin/order",
					}, {
						title: "新闻管理",
						svg: "#speedometer2",
						path: "/admin/news",
					}, {
						title: "商品管理",
						svg: "#grid",
						path: "/admin/goods",
					}, {
						title: "客户管理",
						svg: "#people-circle",
						path: "/admin/customer",
					}
				],
				curIndex: 0, //当前选中的菜单

			}
		},

		methods: {
			changedMenu(i) {
				this.curIndex = i;
				this.$router.push(this.menuList[i].path)
			}
		}
	}
</script>

<style scoped>
	.bi.logout {
		display: inline-block;
		width: 2rem;
		height: 2rem;
		fill: currentColor;
	}

	#sidebarMenu .nav-link {
		color: #000;
	}

	#sidebarMenu .nav-pills .nav-link.active,
	.nav-pills .show>.nav-link {
		color: #fff;
	  background-color: rgba(183, 44, 41, 1);
	}
	.nav-link{
		cursor: pointer;
	}
	
</style>